<template>
  <div class="order-item-box">
    <div class="order-list active">
      <div class="order-title-box" style="background-color: #fceeee;border-bottom: solid 1px #cf2626;">
        <p>{{orderItem.status|orderStatus}}</p>
        <div class="w-100 flex jc-ab">
          <span class="flex-1">{{orderItem.createTime|formatDate}} | <br class="line"/> {{orderItem.returnName}}| 联系电话：{{orderItem.returnPhone}} | <br  class="line"/> 订单号：{{orderItem.orderSn}} </span>
          <span>应付金额：<b>{{orderItem.productRealPrice}}</b> 元</span>
          <span>,退货金额：<b>{{orderItem.returnAmount}}</b> 元</span>
        </div>
      </div>
      <div class="info-item-box">
        <order-info :orderInfo="orderItem" :orderStatus="orderItem.status"></order-info>
      </div>
    </div>

  </div>
</template>

<script>
import OrderInfo from './RefundOrderInfo.vue';
import {formatDate} from '../utils/common.js';
export default {
  components: {
    OrderInfo,
  },
  props:['orderItem'],
  filters:{
      formatDate (time){
          let date = new Date(time)
          return formatDate(date,'yyyy-MM-dd hh:mm') //年-月-日 时分
      },
      orderStatus(status){
          let result = '待审核';
          switch(status){
              case 0: result = "待审核";
                      break;
              case 1: result =  "退货中";
                      break;
              case 2: result =  "退货完成";
                      break;
              case 3: result =  "拒绝退货";
                      break;
              default: result =  "待付款";
          }
          return result;
      }
  },
    data(){
        return {
            order:this.orderItem,
        }
    },
  created(){
      window.console.log(this.order)
  }
  // computed:{
  //
  // }
}
</script>

<style lang="scss" scoped>
.order-list {
  border: solid 1px #dcdcdc;
  &.active {
    border: solid 1px #cf2626;

    .order-title-box {
      background-color: #fceeee;
      border-bottom: solid 1px #cf2626;
    }
    p {
      color: #cf2626;
    }
  }

  .order-title-box {
    padding: 10px 20px;
    text-align: left;
    background-color: #f7f7f7;
    border-bottom: 1px solid #dcdcdc;

    p {
      font-size: 14px;
      color: #454545;
      margin-bottom: 4px;
    }
    b {
      font-size: 18px;
    }
  }
  .info-item-box {
    padding: 10px 20px;
  }
}
.line {
  display: none;
}
/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .order-title-box {
    padding: 10px !important;
    .w-100 {
      display: block;
    }
    span {
      &:nth-child(0) {
        display: block;
        width: 100%;
      }
      &:nth-child(1) {
        display: block;
      }
    }
  }
    
  /deep/  .order-info-box {
    .list-item {
      display:  block;
    }
    .order-btn {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
    }
    .list-img {
      width: 70px;
      height: 70px;
    }
    .list-btn {
      width: 120px;
      line-height: 26px;
      font-size: 14px;
    }
  } 

  .line {
    display: block;
  }
}

</style>